<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{list[0]}}</div>
      <div>{{list[1]}}</div>
      <div>{{list[2]}}</div>
      <div>{{list[3]}}</div>
      <!-- 
        key的作用:提高重排效率,就地复用(diff算法)
            注意点   必须是数字或者字符串
                    必须是唯一值
       -->
      <!-- v-for -->

      <!-- 遍历数组 -->
      <div v-for="(item1,index1) in list" :key="item1">
        <!-- item 数组中的每一个元素  index:索引 -->
        {{item1}}==={{index1}}
      </div>
      <div v-for="item in list">
        <!-- item 数组中的每一个元素  index:索引 -->
        {{item}}
      </div>

      <!-- 遍历对象 -->
      <div v-for="(value,key,index) in obj">{{value}}=={{key}}=={{index}}</div>

      <!-- 遍历数字 -->
      <div v-for="num in 5">
        <div>免费</div>
      </div>

      <!-- 双重for循环嵌套 -->
      <div v-for="(item,index) in listObj1" :key="item.id">
        {{item.title}}
        <div v-for="(itemObj,indexObj) in item.subSections">
          {{itemObj.sectionName}}
        </div>
      </div>
    </div>
  </body>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        list: [1, 2, 3, 4, 1],
        obj: {
          name: "zs",
          age: 18,
        },
        listObj: [
          { id: 1, title: "title1" },
          { id: 2, title: "title2" },
          { id: 3, title: "title3" },
        ],
        listObj1: [
          {
            id: 1,
            title: "day01-java介绍、环境搭建、变量",
            subSections: [
              {
                id: 1,
                sectionName: "01安装jdk",
              },
              {
                id: 2,
                sectionName: "02_记事本开发Java程序",
              },
              {
                id: 3,
                sectionName: "03_总结",
              },
            ],
          },
          {
            id: 2,
            title: "day02-运算符流程控制",
            subSections: [
              {
                id: 1,
                sectionName: "01安装jdk",
              },
              {
                id: 2,
                sectionName: "02_记事本开发Java程序",
              },
              {
                id: 3,
                sectionName: "03_总结",
              },
            ],
          },
          {
            id: 3,
            title: "day03-循环方法",
            subSections: [
              {
                id: 1,
                sectionName: "01安装jdk",
              },
              {
                id: 2,
                sectionName: "02_记事本开发Java程序",
              },
              {
                id: 3,
                sectionName: "03_总结",
              },
            ],
          },
        ],
      },
      methods: {},
    });
  </script>
</html>
